<template>
  <view class="task-item" :class="{ 'task-completed': task.completed }">
    <!-- 任务内容区域 -->
    <view 
      class="task-item-content"
      :style="{ transform: `translateX(${task.offsetX}px)` }"
      @touchstart="onTouchStart($event)"
      @touchmove="onTouchMove($event)"
      @touchend="onTouchEnd"
    >
      <!-- 任务内容 -->
      <view class="task-content">
        <view class="task-time">{{ task.time }}</view>
        <view class="task-title">{{ task.title }}</view>
        <view class="task-desc">{{ task.description }}</view>
      </view>
      
      <!-- 任务完成状态 -->
      <view class="task-status-icon" @click.stop="toggleComplete">
        <view class="status-circle" :class="{ 'completed': task.completed }">
          <view v-if="task.completed" class="status-check"></view>
        </view>
      </view>
    </view>
    
    <!-- 滑动显示的操作按钮 - 使用在线图标 -->
    <view class="action-buttons">
      <view class="edit-btn" @click.stop="onEdit">
        <image src="https://cdn-icons-png.flaticon.com/512/1159/1159633.png" class="edit-icon"></image>
      </view>
      <view class="delete-btn" @click.stop="onDelete">
        <image src="https://cdn-icons-png.flaticon.com/512/3096/3096673.png" class="delete-icon"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TaskItem',
  props: {
    task: {
      type: Object,
      required: true
    },
    swipeThreshold: {
      type: Number,
      default: -160
    }
  },
  data() {
    return {
      touchStartX: 0,
      touchStartTime: 0
    }
  },
  methods: {
    // 触摸开始事件
    onTouchStart(event) {
      if (event.touches.length === 1) {
        this.touchStartX = event.touches[0].clientX
        this.touchStartTime = new Date().getTime()
        this.$emit('touch-start', this.task.id)
      }
    },

    // 触摸移动事件
    onTouchMove(event) {
      if (event.touches.length === 1) {
        const touchX = event.touches[0].clientX
        const diffX = touchX - this.touchStartX
        
        // 允许向左滑动（显示操作按钮）和向右滑动（恢复原位）
        if (diffX <= 0) {
          // 向左滑动，最多滑动到操作按钮的宽度
          this.$emit('update-offset', this.task.id, Math.max(diffX, this.swipeThreshold))
        } else if (this.task.offsetX < 0) {
          // 如果已经有偏移，允许向右滑动恢复，但不超过0
          this.$emit('update-offset', this.task.id, Math.min(this.task.offsetX + diffX, 0))
          // 重新设置起始点，避免累积效应
          this.touchStartX = touchX
        }
      }
    },

    // 触摸结束事件
    onTouchEnd() {
      const offsetX = this.task.offsetX
      
      // 如果滑动距离超过阈值，则保持打开状态
      if (offsetX <= this.swipeThreshold / 2) {
        this.$emit('update-offset', this.task.id, this.swipeThreshold)
      } else {
        this.$emit('update-offset', this.task.id, 0)
      }
    },

    // 切换任务完成状态
    toggleComplete() {
      this.$emit('toggle-complete', this.task.id)
    },

    // 编辑任务
    onEdit() {
      this.$emit('edit', this.task.id)
    },

    // 删除任务
    onDelete() {
      this.$emit('delete', this.task.id)
    }
  }
}
</script>

<style>
.task-item {
  position: relative;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.task-item-content {
  display: flex;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  position: relative;
  z-index: 2;
  width: 100%;
}

.task-content {
  flex: 1;
  padding: 30rpx;
}

.task-time {
  font-size: 32rpx;
  color: #FFCD00;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.task-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.task-desc {
  font-size: 28rpx;
  color: #666;
}

.task-status-icon {
  width: 100rpx;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.status-circle {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  border: 2rpx solid #FFCD00;
  display: flex;
  justify-content: center;
  align-items: center;
}

.status-circle.completed {
  background-color: #FFCD00;
}

.status-check {
  width: 20rpx;
  height: 30rpx;
  border-right: 4rpx solid #FFFFFF;
  border-bottom: 4rpx solid #FFFFFF;
  transform: rotate(45deg) translate(-2rpx, -5rpx);
}

/* 滑动显示的操作按钮 - 使用在线图标 */
.action-buttons {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 160px; /* 调整为合适的宽度，这里假设为160px */
  display: flex; /* 使用弹性布局 */
  z-index: 1;
}

.edit-btn, .delete-btn {
  flex: 1; /* 让按钮平均分配容器的宽度 */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ccc; /* 为了方便查看效果，添加背景颜色 */
}

.edit-btn {
  background-color: #7766E7;
}

.delete-btn {
  background-color: #FE748B;
}

.edit-icon, .delete-icon {
  width: 40rpx;
  height: 40rpx;
}

/* 任务完成样式 */
.task-completed .task-title {
  color: #999;
  text-decoration: line-through;
}

.task-completed .task-desc {
  color: #999;
  text-decoration: line-through;
}
</style>